import { useState, useEffect } from 'react';
import './index.less';
import { Table, Typography, Space, Button } from '@arco-design/web-react';
import '@arco-design/web-react/dist/css/arco.css';
import { Dropdown, Form, Input, Select, DatePicker } from 'antd';
import axios from 'axios';
const { Search } = Input;
const { RangePicker } = DatePicker;

export default function IndexPage(props) {
  // console.log(props);
  const [form] = Form.useForm();
  // 被选中的数据
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);

  // 列表
  const [data, setData] = useState([]);
  useEffect(() => {
    axios.get('http://127.0.0.1:7777/mbom/list').then((res) => {
      setData(res.data.dataList);
    });
  }, []);
  // 查找
  const onFinish = (values) => {
    console.log(values, 66);
  };
  // 搜索
  const onSearch = (values) => {
    console.log(values);
  };
  // 列表结构
  const columns = [
    {
      title: '序号',
      dataIndex: 'key',
      width: 80,
      render: (col, item, index) => {
        return <p>{index + 1}</p>;
      },
    },

    {
      title: '物料清单主题',
      dataIndex: 'mbomtitle',
    },
    {
      title: '物料清单编号',
      dataIndex: 'mbomnum',
    },

    {
      title: '主辅清单',
      dataIndex: 'repertoire',
    },
    {
      title: '产品名称',
      dataIndex: 'Productname',
    },
    {
      title: '制单日期',
      dataIndex: 'remindtime',
    },
    {
      title: '制单人员',
      dataIndex: 'cmaker',
    },
    {
      title: '',
      dataIndex: '          ',
    },
  ];
  // 删除
  const onDel = () => {
    selectedRowKeys.forEach((item) => {
      console.log(item);
      axios.delete(`http://127.0.0.1:7777/mbom/del/${item}`).then((res) => {
        axios.get('http://127.0.0.1:7777/mbom/list').then((res) => {
          // alert('删除成功');
          setData(res.data.dataList);
        });
      });
    });
  };

  const [pagination, setPagination] = useState({
    sizeCanChange: true,
    showTotal: true,
    total: 3,
    pageSize: 5,
    current: 1,
    pageSizeChangeResetCurrent: true,
  });

  function onChangeTable(pagination) {
    const { current, pageSize } = pagination;
    console.log(current, pageSize);
    setPagination((pagination) => ({ ...pagination, current, pageSize }));
  }

  return (
    <div className="container">
      <div className="topBut">
        <Button size="default">新增</Button>
        <Button size="default"> 修改</Button>
        <Button
          size="default"
          onClick={() => {
            onDel();
          }}
        >
          删除
        </Button>
        <Button size="default">过滤</Button>
        <Button size="default">还原</Button>
        <Button size="default">打印</Button>
        <Button size="default">导入</Button>
        <Button size="default">导出</Button>
        <Button size="default">查看日志</Button>
      </div>
      <Form onFinish={onFinish} form={form} name="control-hooks">
        <Form.Item
          label="清单主题："
          name="mbomtitle"
          style={{ display: 'inline-block', marginLeft: '20px' }}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="清单编号："
          name="mbomnum"
          style={{ display: 'inline-block', marginLeft: '20px' }}
        >
          <Input></Input>
        </Form.Item>
        <Form.Item
          label="产品名称："
          name="Productname"
          style={{ display: 'inline-block', marginLeft: '20px' }}
        >
          <Search placeholder="请选择输入" onSearch={onSearch} />
        </Form.Item>
        <Form.Item
          label="添加人员："
          name="cmaker"
          style={{ display: 'inline-block', marginLeft: '20px' }}
        >
          <Search placeholder="请选择或输入" onSearch={onSearch} />
        </Form.Item>

        <Form.Item
          label="添加日期："
          name="remindtime"
          style={{ display: 'inline-block', marginLeft: '20px' }}
        >
          <RangePicker />
        </Form.Item>

        <Button
          style={{
            marginLeft: '20px',
            color: 'rgb(12, 33, 50)',
            background: 'linear-gradient(#e7effb, #f5faff)',
          }}
          type="primary"
          htmlType="submit"
        >
          查询
        </Button>
      </Form>
      <h2>物料清单列表</h2>
      <Table
        rowKey="_id"
        bordered={true}
        columns={columns}
        data={data}
        pagination={pagination}
        onChange={onChangeTable}
        stripe={true}
        rowSelection={{
          type: 'checkbox',
          selectedRowKeys,
          onChange: (selectedRowKeys, selectedRows) => {
            console.log('onChange:', selectedRowKeys, selectedRows);
            setSelectedRowKeys(selectedRowKeys);
          },
          onSelect: (selected, record, selectedRows) => {
            console.log('onSelect:', selected, record, selectedRows);
          },
        }}
      />
    </div>
  );
}
